/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="registry_model_form"
             :label-width="100">
        <div class="registry-top">
            <img src="../../../../img/register_model.png"
                 alt="">
            <div class="content">
                <lang>注册你的模型，为模型部署做准备</lang>
            </div>
        </div>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>任务名称</lang>
            </sf-fieldlabel>
            <span class="name">
                {{ submitData.taskName }}
            </span>
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>模型名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="submitData.modelName"
                :blur-trim="true"
                :default-width="defaultWidth"
                :max-length="30"
                :allow-blank="false"
                :utf8-length="false"
                vtype="name"
                :placeholder="_('请输入模型名称')" />
        </sf-form-item>
    </sf-form>
</template>
<script lang=ts>
import { Component, Vue } from 'vue-property-decorator';

const DEFAULT_WIDTH = 456;
const DEFAULT_VALUE = {
    taskName: '',
    modelName:''
};

@Component
export default class RegistryModelForm extends Vue {
    get defaultWidth () {
        return DEFAULT_WIDTH;
    }
    submitData = { ...DEFAULT_VALUE }

    getJsonValue () {
        return this.submitData;
    }

    setJsonValue (data: typeof DEFAULT_VALUE) {
        this.submitData = Object.assign({ ...DEFAULT_VALUE }, data);
    }
};
</script>
<style lang="less" scoped>
.registry_model_form {
    width: 640px;
    padding-bottom: 160px;
    .registry-top{
        text-align: center;
        img{
            width: 160px;
            height: 160px;
            margin-bottom: 8px;
        }
        .content{
            font-size: 14px;
            color: #A3A3A3;
            margin-bottom: 38px;
        }
       

    }
    .name{
        line-height: 32px;
    }
}
</style>
              